<%@ Page Language="C#" MasterPageFile="~/MainLayout.Master" AutoEventWireup="true" CodeBehind="CreatePost.aspx.cs" Inherits="Instedd.Labs.GeoBlogging.WebApplication.CreatePost" %>

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="Content">
<script language="javascript">
var tabberOptions = {'onClick':function(){ClearGeoCoderUI();}};
</script>
<script type="text/javascript" src="js/tabber-minimized.js"></script>
<link rel="stylesheet" href="css/tabs.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<%= ConfigurationManager.AppSettings["GoogleMapsKey"].ToString() %>"
      type="text/javascript"></script>
      
<script type="text/javascript">

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */

document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>
    <br />
        <form id="form1" runat="server" >
    <span class="label">From:</span><br />
    <asp:TextBox CssClass="editbox" style="width:220px" ID="edFrom" runat="server"></asp:TextBox><asp:CheckBox runat="server" CssClass="postDescription" style="font-size:12px; padding-left:10px" Text="Remember From and Location on this machine" ID="cxRememberMe" /><br />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="edFrom"
                CssClass="validationMessage" ErrorMessage="Please complete the From field"></asp:RequiredFieldValidator><br />
    <span class="label">Title:</span><br />
    <asp:TextBox CssClass="editbox" style="width:500px" ID="edTitle" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="edTitle"
                CssClass="validationMessage" ErrorMessage="Please provide a Title"></asp:RequiredFieldValidator><br />
    <div class="tabber" style="width:500px">
  <div class="tabbertab" id="tabDMS">
    <h2>DMS</h2>
    <div><span class="label" style="padding-right:20px">Lat</span><input class="editboxShort" id="edLatDegrees" type="text" onblur="FromDMSToDecimal();" /> <input class="editboxShort" id="edLatMinutes" type="text" onblur="FromDMSToDecimal();" /> <input class="editboxShort" id="edLatSeconds" type="text" onblur="FromDMSToDecimal();" /> </div>
    <div><span class="label" style="padding-right:10px">Long</span><input class="editboxShort" id="edLongDegrees" type="text" onblur="FromDMSToDecimal();" /> <input class="editboxShort" id="edLongMinutes" type="text" onblur="FromDMSToDecimal();" /> <input class="editboxShort" id="edLongSeconds" type="text" onblur="FromDMSToDecimal();" /> </div>
  </div>
  <div class="tabbertab" id="tabDecimal">
    <h2>Decimal</h2>
    <div><span class="label">Lat </span><input class="editboxShort" id="edDecimalLat" name="edDecimalLat" type="text" onblur="FromDecimalToDMS();"/> <span class="label">Long </span><input class="editboxShort" id="edDecimalLong" name="edDecimalLong" onblur="FromDecimalToDMS();" type="text"/> </div>
   </div>
  <div class="tabbertab" id="tabAddress">
    <h2>Address</h2>
    <div><span class="label">Address: </span><input class="editboxShort" id="edAddress" name="edAddress" style="width:370px" type="text"/>&nbsp;<input type="button" value="Find" onclick="PostalAddress2LatLong();" />
    <span id="resultMessage" class="label" style="display:none"></span><span id="checkMapMessage" class="label" onclick="ShowInlineMap();" style="display:none;text-decoration:underline;cursor:pointer">Show map for guessed LatLong</span>
    <div id="map" style="display:none; width: 400px; height: 200px; border-left-color: green; border-bottom-color: green; border-top-style: solid; border-top-color: green; border-right-style: solid; border-left-style: solid; border-right-color: green; border-bottom-style: solid;"></div>
    </div>
  </div>
</div>
   
    <br />
    <span class="label">Body:</span><br />
    <asp:TextBox CssClass="bodyTextBox" ID="edBody" runat="server" TextMode="MultiLine" MaxLength="5000"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="edBody"
                CssClass="validationMessage" ErrorMessage="Please provide a Body"></asp:RequiredFieldValidator><div><asp:Button runat="server" CssClass="buttons" Text="Submit" ID="submitForm" /></div>
    <div>&nbsp;</div><div>&nbsp;</div>
    </form>

<asp:Literal runat="server" ID="placeholderHelper"></asp:Literal>

<script language="javascript" type="text/javascript">
var lookupWindow = null;
var latsign = 1;
var longsign = 1;
function FromDecimalToDMS()
{
    var latSign, longSign;

    var decimalLatElem = document.getElementById("edDecimalLat");
    var decimalLongElem = document.getElementById("edDecimalLong");

    if(!isValidDecimalLat(decimalLatElem.value))
    {
        alert("Invalid Decimal Latitude entered");
        return;
    }
    
    if(!isValidDecimalLong(decimalLongElem.value))
    {
        alert("Invalid Decimal Longitude entered");
        return;
    }
    
    if(decimalLatElem.value < 0)
    {
        latSign = -1;
    }
    else
    {
        latSign = 1;
    }    
    
    if(decimalLongElem.value <0)
    {
        longSign = -1;
    }
    else
    {
        longSign = 1;
    }

    DecimalToDms(latSign,decimalLatElem.value,document.getElementById("edLatDegrees"), document.getElementById("edLatMinutes"), document.getElementById("edLatSeconds"));
    DecimalToDms(longSign,decimalLongElem.value,document.getElementById("edLongDegrees"), document.getElementById("edLongMinutes"), document.getElementById("edLongSeconds"));
}

function FromDMSToDecimal()
{
    var latSign, longSign;
    var latDegreesElem = document.getElementById("edLatDegrees");
    var longDegreesElem = document.getElementById("edLongDegrees");
    
    if(latDegreesElem.value < 0)
    {
        latSign = -1;
    }
    else
    {
        latSign = 1;
    }    
    
    if(longDegreesElem.value <0)
    {
        longSign = -1;
    }
    else
    {
        longSign = 1;
    }

    DmsToDecimal(latSign,document.getElementById("edLatDegrees").value,document.getElementById("edLatMinutes").value,document.getElementById("edLatSeconds").value, document.getElementById("edDecimalLat"));
    DmsToDecimal(longSign, document.getElementById("edLongDegrees").value,document.getElementById("edLongMinutes").value,document.getElementById("edLongSeconds").value, document.getElementById("edDecimalLong"));
}

function GeoCodeLookup()
{
    document.latlong = "1";
    document.SetValues = SetLatLongFields;
    var lookupWindow = window.open("GeoCodeLookup.aspx",'GeoLookup','height=600px,width=620px,resizable=no,scrollbars=no,toolbar=no,status=yes');
    lookupWindow.focus();
}

function SetLatLongFields(lat, lon)
{
    document.getElementById("edDecimalLat").value = lat;
    document.getElementById("edDecimalLong").value = lon;
    FromDecimalToDMS ();
}

function DmsToDecimal(sign, degrees, minutes, seconds, decCoord)
{
    degrees = Math.abs( Math.round(degrees * 1000000.));
    minutes = Math.abs( Math.round(minutes * 1000000.));
    seconds = Math.abs( Math.round(seconds * 1000000.));
    decCoord.value = Math.round(degrees + (minutes/60.) + (seconds/3600.) ) * sign/1000000;
}

function DecimalToDms(sign, coord, degrees, minutes, seconds)
{
    coord = Math.abs( Math.round(coord * 1000000.))
    degrees.value = (Math.floor(coord / 1000000) * sign);
    minutes.value = Math.floor(  ((coord/1000000) - Math.floor(coord/1000000)) * 60);
    seconds.value = ( Math.floor(((((coord/1000000) - Math.floor(coord/1000000)) * 60) - Math.floor(((coord/1000000) - Math.floor(coord/1000000)) * 60)) * 100000) *60/100000 );
}

function ValidateLatLong()
{
    if (!isValidLat(document.getElementById("edDecimalLat").value))
    {
        alert('Degrees Latitude must be in the range of -90 to 90');
        return false;
    }
    
    if (!isValidLong(document.getElementById("edDecimalLong").value))
    {
        alert('Degrees Longitude must be in the range of -180 to 180');
        return false;
    }
    
    return true;
}


function isValidDecimalLat(lat)
{
    if (lat < -90 || lat > 90)
    {
        return false;
    }
    return true;
}

function isValidDecimalLong(lon)
{
    if (lon < -180 || lon > 180)
    {
        return false;
    }
    return true;
}

    function PostalAddress2LatLong()
    {
        var geocoder = new GClientGeocoder();
        var elem = document.getElementById('edAddress');
        postalAddressValue = elem.value;
        mapLoaded = false;
        geocoder.getLatLng(postalAddressValue, LatLongCallback);
        return false;
    }


    function LatLongCallback(point)
    {
        if (point != null)
        {
//            document.getElementById("checkMapMessage").style.display = "block";
            document.getElementById("resultMessage").style.display = "none";
//            document.getElementById("resultMessage").style.color = "green";
//            document.getElementById("resultMessage").innerText = "We were able to retrieve LatLong coordinates for the entered address and we've filled the corresponding fields for you!.";
            document.getElementById("edDecimalLat").value = point.y;
            document.getElementById("edDecimalLong").value = point.x;
              document.getElementById("map").style.display = "block";
            FromDecimalToDMS();
            ShowInlineMap(true);
        }
        else
        {
//            document.getElementById("checkMapMessage").style.display = "none";
              document.getElementById("resultMessage").style.display = "block";
              document.getElementById("map").style.display = "none";
              document.getElementById("resultMessage").style.color = "red";
              document.getElementById("resultMessage").innerText = "Sorry we couldn't retrieve LatLong coordinates for the entered address, please try again varying the address.";
        }
    }
    
    function ClearGeoCoderUI()
    {
        document.getElementById("resultMessage").style.display = "none";
        document.getElementById('edAddress').value = "";
        document.getElementById("checkMapMessage").style.display = "none";
        document.getElementById("map").style.display = "none";
        ShowInlineMap(false);
    }
    
    var mapLoaded = false;
    
    function ShowInlineMap(show)
    {
        if (!show)
        {
            document.getElementById("map").style.display = "none";
        }
        else
        {
            document.getElementById("map").style.display = "block";
            LoadInlineMap(document.getElementById("edDecimalLat").value,document.getElementById("edDecimalLong").value);
        }
    }
    
    function LoadInlineMap(x,y) {
    if (mapLoaded)
    {
        return;
    }
    mapLoaded = true;
    
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(x, y), 13);
        point = new GLatLng(x,y);
        marker = new GMarker(point);
        map.addOverlay(marker);
      }
    }

    
</script>
    
</asp:Content>